<script setup lang="ts">
import {ref} from "vue";
import router from "../Router";
import {useRoute} from "vue-router";

const route = useRoute()
//在每个页面设置一个默认值,就不会有延迟效果了(也就是点两次
function toBrowsePage(index){
  router.push({
    path:"/customer/browseAllShop",
    query:{index:index}
  })
}
function toMyOrderPage(index){
  router.push({
    path:"/customer/myOrder",
    query:{index:index}
  })

}
</script>

<template>
  <div class="text-gray fixed bottom-0 left-0 w-full h-18vw ml--2v  flex items-center select-none">
    <div class="w-50% flex justify-center items-center text-5vw border-solid border-2 border-white
                hover:border-2 hover:border-t-orange hover:text-orange"
         :class="[route.query.index==0 ? 'active' : '']"
         @click="toBrowsePage(0)"
    >
      <p>浏览门店</p>
    </div>
    <div class="w-50% flex justify-center items-center text-5vw border-solid border-1 border-white
              hover:border-2 hover:border-t-orange hover:text-orange"
         :class="[route.query.index==1 ? 'active' : '']"
        @click="toMyOrderPage(1)"
    >
      <p>我的订单</p>
    </div>
  </div>
</template>

<style scoped>
.active{
  @apply  border-2 border-t-orange text-orange ;
}
</style>